<template>
    <view class="calendar-container">
        <view class="gender-selector">
            <view :class="['gender-option', { active: gender === 'male' }]" @click="changeGender('male')">
            </view>
            <view :class="['gender-option', { active: gender === 'female' }]" @click="changeGender('female')">
            </view>
        </view>

        <text class="background-year">{{ year }}</text>
        <view class="calendar-header">
            <text class="month-display">{{ month.toString().padStart(2, '0') }}</text>
            <text class="date-separator">/</text>
            <text class="month-display">{{ day.toString().padStart(2, '0') }}</text>
        </view>



        <view class="weekdays">
            <text v-for="day in ['一', '二', '三', '四', '五', '六', '日']" :key="day" class="weekday">{{ day }}</text>
        </view>

        <view class="days">
            <view v-for="(day, index) in calendarDays" :key="index" class="day-cell"
                :style="{ gridColumnStart: index === 0 ? firstDayColumn : 'auto' }">
                <view v-if="day.isCurrentMonth" :class="['day-number', {
                    'selected': day.isSelected
                }]">
                    <text>{{ day.date }}</text>
                    <image v-if="day.isSelected"
                        src="https://files.bigtian.club/bigtian/2024/12/18/20241218143635A004.png" class="heart-icon"
                        mode="aspectFit" />
                </view>
            </view>
        </view>

        <view class="calendar-decorations">
            <image src="https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png"
                class="decoration top-left"></image>
            <image src="https://files.bigtian.club/bigtian/2024/12/18/20241218153814A029.png"
                class="decoration bottom-right"></image>
        </view>
    </view>
    <view class="date-info">
        <view class="tip-container">
            <text class="tip-text">温馨提示：日期会根据下面新郎/新娘的选择自动调整</text>
        </view>
        <text class="gregorian-date">{{ year }}年{{ month }}月{{ day }}日 星期{{ weekDayText }}</text>
        <text class="lunar-date">农历{{ lunarMonth }}{{ lunarDay }} {{ time }}</text>
    </view>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
    date: {
        type: String,
        required: true
    },
    lunarDate: {
        type: String,
        required: true
    }
});

// 添加性别状态
const gender = ref('female');
const emit = defineEmits(['update:gender']);

// 性别切换方法
const changeGender = (newGender) => {
    gender.value = newGender;
    emit('update:gender', newGender);
};

// 解析日期
const dateInfo = computed(() => {
    const d = new Date(props.date);
    return {
        year: d.getFullYear(),
        month: d.getMonth() + 1,
        day: d.getDate()
    };
});

const year = computed(() => dateInfo.value.year);
const month = computed(() => dateInfo.value.month);
const day = computed(() => dateInfo.value.day);

// 获取月份的第一天星期几
const getFirstDayOfMonth = (year, month) => {
    const firstDay = new Date(year, month - 1, 1).getDay();
    return firstDay === 0 ? 7 : firstDay;
};

// 获取月份的总天数
const getDaysInMonth = (year, month) => {
    return new Date(year, month, 0).getDate();
};

// 计算属性
const firstDayColumn = computed(() => {
    return getFirstDayOfMonth(dateInfo.value.year, dateInfo.value.month);
});

// 日历数据生成逻辑
const calendarDays = computed(() => {
    const days = [];
    const daysInMonth = getDaysInMonth(dateInfo.value.year, dateInfo.value.month);

    for (let i = 1; i <= daysInMonth; i++) {
        days.push({
            date: i,
            isCurrentMonth: true,
            isSelected: i === dateInfo.value.day
        });
    }

    return days;
});

// 星期几计算属性
const weekDayText = computed(() => {
    const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
    const date = new Date(dateInfo.value.year, dateInfo.value.month - 1, dateInfo.value.day);
    return weekDays[date.getDay()];
});

// 修改农历日期的解析方式
const lunarInfo = computed(() => {
    return {
        lunarMonth: props.lunarDate.slice(0, -2),
        lunarDay: props.lunarDate.slice(-2)
    };
});

const lunarMonth = computed(() => lunarInfo.value.lunarMonth);
const lunarDay = computed(() => lunarInfo.value.lunarDay);

// 实时时间计算
const time = "15:00"
</script>

<style scoped>
.calendar-container {
    background-color: #FFF5E1;
    border-radius: 15px;
    padding: 20rpx 20rpx 10rpx 20rpx;
    position: relative;
    width: 630rpx;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.background-year {
    position: absolute;
    font-size: 100px;
    color: rgba(205, 133, 63, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    font-weight: bold;
    white-space: nowrap;
}

.calendar-header {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    gap: 5px;
}

.year-display {
    font-size: 24px;
    color: #CD853F;
    margin-bottom: 5px;
}

.month-display {
    font-size: 32px;
    color: #CD853F;
    font-weight: bold;
    display: inline-block;
}

.month-display+.month-display {
    margin-left: 5px;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 5px;
}

.weekday {
    text-align: center;
    color: #8B5E3C;
    font-size: 28rpx;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 0;
}

.day-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rpx;
}

.day-number {
    width: 64rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #8B5E3C;
    position: relative;
}

.day-number text {
    z-index: 1;
}

.selected text {
    color: transparent;
}

.heart-icon {
    position: absolute;
    width: 40rpx !important;
    height: 40rpx !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: heartBeat 1.2s infinite;
    z-index: 99;
}

@keyframes heartBeat {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    14% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    28% {
        transform: translate(-50%, -50%) scale(1);
    }

    42% {
        transform: translate(-50%, -50%) scale(1.3);
    }

    70% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.empty {
    visibility: hidden;
}

.calendar-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    margin-bottom: 0;
}

.decoration {
    position: absolute;
    width: 20px;
    height: 20px;
}

.top-left {
    top: -10px;
    left: -10px;
}

.bottom-right {
    bottom: -10px;
    right: -10px;
}

.date-separator {
    color: #CD853F;
    font-size: 28px;
    /* 稍微小一点的字号 */
    font-weight: normal;
    /* 不加粗 */
    opacity: 0.8;
    /* 稍微透明一点 */
    margin: 0 2px;
    /* 调整两边间距 */
}

.date-info {
    text-align: center;
    margin: 30px 0;
    position: relative;
    z-index: 1;
}

.gregorian-date {
    display: block;
    color: #8B5E3C;
    font-size: 16px;
    margin-bottom: 4px;
}

.lunar-date {
    display: block;
    color: #CD853F;
    font-size: 16px;
    opacity: 0.8;
}

.gender-selector {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    margin-bottom: 20rpx;
}

.gender-option {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(205, 133, 63, 0.1);
    padding: 10rpx;
}

.gender-option.active {
    background: rgba(205, 133, 63, 0.3);
    transform: scale(1.1);
}

.gender-option image {
    width: 40rpx;
    height: 40rpx;
}

.tip-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(205, 133, 63, 0.1);
    padding: 16rpx 24rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    gap: 10rpx;
}

.tip-icon {
    width: 32rpx;
    height: 32rpx;
}

.tip-text {
    color: #CD853F;
    font-size: 26rpx;
}
</style>